<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家政小程序 - 课程报名</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            max-width: 750px;
            margin: 0 auto;
            background-color: #f7f8fa;
            color: #333;
        }
        .step-indicator {
            height: 4px;
            background-color: #e5e7eb;
        }
        .step-indicator-active {
            background-color: #4f46e5;
        }
        .form-input {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px 16px;
            transition: all 0.2s;
        }
        .form-input:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
        }
        .btn-primary {
            background-color: #4f46e5;
            color: white;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 500;
            transition: all 0.2s;
        }
        .btn-primary:hover {
            background-color: #4338ca;
        }
        .btn-outline {
            border: 1px solid #4f46e5;
            color: #4f46e5;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 500;
            transition: all 0.2s;
        }
        .btn-outline:hover {
            background-color: #eef2ff;
        }
        .course-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            transition: all 0.2s;
        }
        .course-card:hover {
            border-color: #c7d2fe;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .time-slot {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            transition: all 0.2s;
        }
        .time-slot:hover {
            border-color: #4f46e5;
        }
        .time-slot.selected {
            background-color: #eef2ff;
            border-color: #4f46e5;
        }
        .payment-method {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            transition: all 0.2s;
        }
        .payment-method:hover {
            border-color: #4f46e5;
        }
        .payment-method.selected {
            background-color: #eef2ff;
            border-color: #4f46e5;
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .toggle-slider {
            background-color: #4f46e5;
        }
        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }
    </style>
</head>
<body>
    <div class="bg-white sticky top-0 z-10 shadow-sm">
        <div class="px-4 py-3 flex items-center justify-between">
            <button class="text-gray-600" onclick="window.history.back()">
                <i class="fas fa-chevron-left text-lg"></i>
            </button>
            <div class="text-lg font-medium">课程报名</div>
            <div class="w-6"></div>
        </div>
        <div class="px-4 pb-3">
            <div class="flex justify-between items-center mb-2">
                <div class="text-sm text-gray-500">步骤1：选择课程</div>
                <div class="text-sm text-gray-500">步骤2：填写信息</div>
                <div class="text-sm text-gray-500">步骤3：确认订单</div>
                <div class="text-sm text-gray-500">步骤4：支付完成</div>
            </div>
            <div class="flex step-indicator">
                <div class="step-indicator-active w-1/4"></div>
                <div class="w-1/4"></div>
                <div class="w-1/4"></div>
                <div class="w-1/4"></div>
            </div>
        </div>
    </div>

    <div class="p-4">
        <!-- 步骤1：选择课程/班级 -->
        <div id="step1" class="step-content">
            <div class="mb-6">
                <h3 class="text-lg font-medium mb-3">课程信息</h3>
                <div class="course-card p-4 mb-4">
                    <div class="flex">
                        <div class="w-20 h-20 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="fas fa-home text-indigo-500 text-2xl"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium text-lg mb-1">高级家政服务培训</h4>
                            <p class="text-gray-500 text-sm mb-2">讲师：张老师 | 课时：30小时</p>
                            <p class="text-gray-700">系统学习家政服务专业技能，包含清洁、烹饪、育儿等全方位培训</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-medium mb-3">选择上课日期</h3>
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="flex justify-between items-center mb-4">
                        <button class="text-gray-500">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <div class="font-medium">2024年7月</div>
                        <button class="text-gray-500">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-7 gap-2 text-center">
                        <div class="text-gray-400 text-sm py-2">日</div>
                        <div class="text-gray-400 text-sm py-2">一</div>
                        <div class="text-gray-400 text-sm py-2">二</div>
                        <div class="text-gray-400 text-sm py-2">三</div>
                        <div class="text-gray-400 text-sm py-2">四</div>
                        <div class="text-gray-400 text-sm py-2">五</div>
                        <div class="text-gray-400 text-sm py-2">六</div>
                        
                        <div class="py-2"></div>
                        <div class="py-2"></div>
                        <div class="py-2 text-gray-400">1</div>
                        <div class="py-2 text-gray-400">2</div>
                        <div class="py-2 text-gray-400">3</div>
                        <div class="py-2 text-gray-400">4</div>
                        <div class="py-2 text-gray-400">5</div>
                        
                        <div class="py-2 text-gray-400">6</div>
                        <div class="py-2 text-gray-400">7</div>
                        <div class="py-2">8</div>
                        <div class="py-2">9</div>
                        <div class="py-2">10</div>
                        <div class="py-2">11</div>
                        <div class="py-2">12</div>
                        
                        <div class="py-2">13</div>
                        <div class="py-2">14</div>
                        <div class="py-2">15</div>
                        <div class="py-2">16</div>
                        <div class="py-2">17</div>
                        <div class="py-2">18</div>
                        <div class="py-2">19</div>
                        
                        <div class="py-2">20</div>
                        <div class="py-2">21</div>
                        <div class="py-2">22</div>
                        <div class="py-2 bg-indigo-100 text-indigo-600 rounded-full">23</div>
                        <div class="py-2">24</div>
                        <div class="py-2">25</div>
                        <div class="py-2">26</div>
                        
                        <div class="py-2">27</div>
                        <div class="py-2">28</div>
                        <div class="py-2">29</div>
                        <div class="py-2">30</div>
                        <div class="py-2">31</div>
                        <div class="py-2 text-gray-400">1</div>
                        <div class="py-2 text-gray-400">2</div>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-medium mb-3">选择时间段/班级</h3>
                <div class="space-y-3">
                    <div class="time-slot">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="font-medium">上午班</div>
                                <div class="text-sm text-gray-500">09:00-12:00 | 剩余名额：5人</div>
                            </div>
                            <div class="text-indigo-600 font-medium">¥2980</div>
                        </div>
                    </div>
                    <div class="time-slot selected">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="font-medium">下午班</div>
                                <div class="text-sm text-gray-500">14:00-17:00 | 剩余名额：8人</div>
                            </div>
                            <div class="text-indigo-600 font-medium">¥2980</div>
                        </div>
                    </div>
                    <div class="time-slot">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="font-medium">晚班</div>
                                <div class="text-sm text-gray-500">19:00-21:30 | 剩余名额：3人</div>
                            </div>
                            <div class="text-indigo-600 font-medium">¥2980</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg" style="max-width: 750px; margin: 0 auto;">
                <button class="w-full btn-primary">下一步</button>
            </div>
        </div>

        <!-- 步骤2：填写信息 -->
        <div id="step2" class="step-content hidden">
            <div class="mb-6">
                <h3 class="text-lg font-medium mb-4">个人信息</h3>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input type="text" class="w-full form-input" placeholder="请输入您的姓名">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                        <div class="flex">
                            <input type="tel" class="flex-1 form-input rounded-r-none" placeholder="请输入手机号码">
                            <button class="bg-indigo-100 text-indigo-600 px-4 rounded-r-lg border border-l-0 border-gray-300">获取验证码</button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                        <input type="text" class="w-full form-input" placeholder="请输入验证码">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
                        <input type="text" class="w-full form-input" placeholder="请输入身份证号码">
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-medium mb-4">特殊需求</h3>
                <textarea class="w-full form-input h-24" placeholder="如有特殊需求请在此填写（选填）"></textarea>
            </div>

            <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg" style="max-width: 750px; margin: 0 auto;">
                <div class="flex space-x-3">
                    <button class="flex-1 btn-outline">上一步</button>
                    <button class="flex-1 btn-primary">下一步</button>
                </div>
            </div>
        </div>

        <!-- 步骤3：确认订单 -->
        <div id="step3" class="step-content hidden">
            <div class="mb-6">
                <h3 class="text-lg font-medium mb-4">订单信息</h3>
                <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
                    <div class="flex items-center mb-3">
                        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-home text-indigo-500"></i>
                        </div>
                        <div>
                            <h4 class="font-medium">高级家政服务培训</h4>
                            <p class="text-sm text-gray-500">下午班 | 2024-07-23 开始</p>
                        </div>
                    </div>
                    <div class="border-t border-gray-100 pt-3">
                        <div class="flex justify-between py-2">
                            <span class="text-gray-600">课程费用</span>
                            <span class="font-medium">¥2980</span>
                        </div>
                        <div class="flex justify-between py-2">
                            <span class="text-gray-600">优惠券</span>
                            <div class="flex items-center">
                                <span class="text-indigo-600 mr-2">-¥200</span>
                                <select class="text-sm border-0 bg-transparent text-indigo-600">
                                    <option>选择优惠券</option>
                                    <option>新人优惠券 ¥200</option>
                                    <option>会员优惠券 ¥100</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex justify-between py-2">
                            <span class="text-gray-600">积分抵扣</span>
                            <div class="flex items-center">
                                <span class="text-indigo-600 mr-2">-¥50</span>
                                <label class="toggle-switch ml-2">
                                    <input type="checkbox" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                        <div class="flex justify-between py-2 border-t border-gray-100 mt-2">
                            <span class="text-gray-600">实付金额</span>
                            <span class="text-xl font-bold text-indigo-600">¥2730</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h3 class="text-lg font-medium mb-4">选择支付方式</h3>
                <div class="space-y-3">
                    <div class="payment-method selected">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fab fa-weixin text-green-500"></i>
                            </div>
                            <div class="flex-1">
                                <div class="font-medium">微信支付</div>
                            </div>
                            <i class="fas fa-check-circle text-indigo-500"></i>
                        </div>
                    </div>
                    <div class="payment-method">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fab fa-alipay text-blue-500"></i>
                            </div>
                            <div class="flex-1">
                                <div class="font-medium">支付宝</div>
                            </div>
                            <i class="fas fa-check-circle text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <div class="flex items-start">
                    <input type="checkbox" id="agreement" class="mt-1 mr-2" checked>
                    <label for="agreement" class="text-sm text-gray-600">我已阅读并同意《家政服务培训协议》</label>
                </div>
            </div>

            <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg" style="max-width: 750px; margin: 0 auto;">
                <div class="flex space-x-3">
                    <button class="flex-1 btn-outline">上一步</button>
                    <button class="flex-1 btn-primary">确认支付</button>
                </div>
            </div>
        </div>

        <!-- 步骤4：支付完成 -->
        <div id="step4" class="step-content hidden">
            <div class="text-center py-8">
                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-check text-green-500 text-3xl"></i>
                </div>
                <h3 class="text-xl font-medium mb-2">支付成功</h3>
                <p class="text-gray-500 mb-6">您已成功报名高级家政服务培训课程</p>
                <div class="bg-white rounded-lg p-4 shadow-sm max-w-md mx-auto mb-6">
                    <div class="flex justify-between py-2">
                        <span class="text-gray-600">订单编号</span>
                        <span>PDD20240723001</span>
                    </div>
                    <div class="flex justify-between py-2">
                        <span class="text-gray-600">课程名称</span>
                        <span>高级家政服务培训</span>
                    </div>
                    <div class="flex justify-between py-2">
                        <span class="text-gray-600">上课时间</span>
                        <span>2024-07-23 14:00-17:00</span>
                    </div>
                    <div class="flex justify-between py-2">
                        <span class="text-gray-600">支付金额</span>
                        <span class="font-medium text-indigo-600">¥2730</span>
                    </div>
                </div>
                <div class="space-y-3 max-w-md mx-auto">
                    <button class="w-full btn-primary">查看课程详情</button>
                    <button class="w-full btn-outline">返回首页</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 步骤切换逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const steps = document.querySelectorAll('.step-content');
            const stepIndicator = document.querySelectorAll('.step-indicator > div');
            const stepTexts = document.querySelectorAll('.flex.justify-between.items-center.mb-2 > div');
            
            // 下一步按钮点击事件
            document.querySelectorAll('.btn-primary').forEach((btn, index) => {
                btn.addEventListener('click', function() {
                    if (index < 3) { // 不是最后一步
                        steps[index].classList.add('hidden');
                        steps[index + 1].classList.remove('hidden');
                        
                        // 更新步骤指示器
                        stepIndicator[index].classList.remove('step-indicator-active');
                        stepIndicator[index + 1].classList.add('step-indicator-active');
                        
                        // 更新步骤文字
                        stepTexts[index].classList.remove('text-gray-500');
                        stepTexts[index].classList.add('text-indigo-600', 'font-medium');
                    }
                });
            });
            
            // 上一步按钮点击事件
            document.querySelectorAll('.btn-outline').forEach((btn, index) => {
                if (index > 0) { // 不是第一步的上一步按钮
                    btn.addEventListener('click', function() {
                        steps[index + 1].classList.add('hidden');
                        steps[index].classList.remove('hidden');
                        
                        // 更新步骤指示器
                        stepIndicator[index + 1].classList.remove('step-indicator-active');
                        stepIndicator[index].classList.add('step-indicator-active');
                        
                        // 更新步骤文字
                        stepTexts[index].classList.add('text-gray-500');
                        stepTexts[index].classList.remove('text-indigo-600', 'font-medium');
                    });
                }
            });
            
            // 时间段选择
            document.querySelectorAll('.time-slot').forEach(slot => {
                slot.addEventListener('click', function() {
                    document.querySelectorAll('.time-slot').forEach(s => {
                        s.classList.remove('selected');
                    });
                    this.classList.add('selected');
                });
            });
            
            // 支付方式选择
            document.querySelectorAll('.payment-method').forEach(method => {
                method.addEventListener('click', function() {
                    document.querySelectorAll('.payment-method').forEach(m => {
                        m.classList.remove('selected');
                        m.querySelector('.fa-check-circle').classList.remove('text-indigo-500');
                        m.querySelector('.fa-check-circle').classList.add('text-gray-300');
                    });
                    this.classList.add('selected');
                    this.querySelector('.fa-check-circle').classList.remove('text-gray-300');
                    this.querySelector('.fa-check-circle').classList.add('text-indigo-500');
                });
            });
        });
    </script>
</body>
</html>